import React, { Component } from 'react'
import { connect } from 'react-redux'
import {InitState,ListItem} from '../types/index'
import {RouteComponentProps} from 'react-router-dom'
import { NavBar, Icon } from 'antd-mobile';
import LazyLoad from 'react-lazyload';
import '../css/index.scss'
interface Props extends InitState,RouteComponentProps<{id:string}>{
    addCar(id:string):void
}
interface State {
    
}

export class Detail extends Component<Props, State> {
    state = {
        detail:{} as ListItem
    }

    render() {
        const {id} = this.props.match.params
        const {list} = this.props
        let detail = this.state.detail
        console.log(detail);
        
        list.forEach(item=>{
            item.children.forEach(it=>{
                if(it.id===id){
                    detail=it
                }
            })
        })                
        return (
            <div className='detail'>
                <div className='detailhead'>
                <NavBar
                    mode="light"
                    icon={<Icon type="left" />}
                    onLeftClick={() => this.props.history.go(-1)}
                    >详情</NavBar>
                </div>
                <div className='detailmain'>
                <LazyLoad height={200} overflow>
                    <img src={detail.img} alt="" />
                </LazyLoad>
                    
                    <h2>{detail.title}</h2>
                    <p>沉稳双拼色 居家温柔呵护</p>
                    <p>￥{detail.price}元</p>
                </div>
                <div className='detailfooter'>
                    <p>
                        <span onClick={()=>this.props.history.push('/index/car')}>o{this.props.carList.length}</span>
                        <span onClick={()=>this.props.addCar(detail.id)}>加入购物车</span>
                        <span>立即购买</span>
                    </p>
                </div>
            </div>
        )
    }
}

const mapStateToProps = (state:Props) => ({
    list:state.list,
    carList:state.carList
})

const mapDispatchToProps = (dispatch:Function)=>({
    addCar:(id:string)=>dispatch({type:'SET_ADD_CAR',id})
})

export default connect(mapStateToProps, mapDispatchToProps)(Detail)
